<template>
    <div class="rightView">
        <div class="header">
            <p id="robotTitle" v-text="robotTitle"></p>
        </div>
        <div class="centerBox">
            <!-- 模式区域 -->
            <div class="mode">
                <div class="buttonArea">
                    <div class="title">
                        <p>模式选项</p>
                        <span></span>
                    </div>
                    <div class="btnBody">
                        <div class="modeBtn">
                            <p>自动模式</p>
                            <el-button circle size="mini" @click="selectedTab = 0"
                                style="background:linear-gradient(227deg, #0F947C, #10DAB2);">
                            </el-button>
                        </div>
                        <div class="modeBtn">
                            <p>自由模式</p>
                            <el-button circle size="mini" @click="selectedTab = 1"
                                style="background: linear-gradient(227deg, #C45016, #F58614);">
                            </el-button>
                        </div>
                        <div class="modeBtn">
                            <p>手动模式</p>
                            <el-button circle size="mini" @click="selectedTab = 2"
                                style="background: linear-gradient(68deg, #3040F4, #3F79F4);">
                            </el-button>
                        </div>
                        <div class="modeBtn">
                            <p>一键返航</p>
                            <el-button circle size="mini" @click="selectedTab = 3"
                                style="background: linear-gradient(227deg, #337F17, #3CA813);">
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="displayArea">
                    <img @click="open" src="../../../images/停.png" alt=""
                        style="width:37px;height:37px; cursor: pointer;">
                    <div
                        style="display:flex;align-items: center;font-family: Source Han Sans CN;font-weight: bold; font-size: 12px;color: #123150;">
                        <img src="../../../images/lianjie.png" alt=""
                            style="width:15.5px;height:18.5px;margin-right:4px;">
                        <img src="../../../images/lianjie-no.png" alt=""
                            style="width:15.5px;height:18.5px;margin-right:4px;">
                        <p>机器人重连</p>
                    </div>
                </div>
                <!-- 自动模式 -->
                <div class="modeArea" v-if="selectedTab === 0">
                    <div class="title">
                        <p>自动模式</p>
                        <img src="../../../images/line1.png" alt="">
                    </div>
                    <div class="modeBtn">
                        <div class="modeBtn1">
                            <p>定位状态</p>
                            <div class="modeBtn1-1">
                                <p v-if="locationState == 1">丢失</p>
                                <p v-if="locationState == 0">准确</p>
                                <p v-if="locationState == 3">暂无数据</p>
                            </div>
                        </div>
                    </div>
                    <div class="modeBtn">
                        <div class="modeBtn1">
                            <p>地图名称</p>
                            <div class="modeBtn1-1">
                                <p v-if="usingMap == null || usingMap == ''">暂无数据</p>
                                <p v-else>{{ this.usingMap }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="modeBtn">
                        <div class="modeBtn1">
                            <p>导航进度</p>
                            <div class="modeBtn1-1">
                                <p v-if="taskState == null || taskState == ''">暂无数据</p>
                                <p v-else>{{ percentage }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="modeBtn">
                        <div class="modeBtn1">
                            <p>机器人当前速度</p>
                            <div class="modeBtn1-1">
                                <p v-if="linearX == null || linearX == ''">暂无数据</p>
                                <p v-else>{{ linearX }}m/s</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 自由模式 -->
                <div class="modeArea" v-if="selectedTab === 1">
                    <div class="title">
                        <p>自由模式</p>
                        <img src="../../../images/line1.png" alt="">
                    </div>
                    <div class="modeBtn">
                        <p style="font-family: Source Han Sans CN;font-weight: bold;font-size: 12px;color: #EDEDED;">
                            请通过遥控器对机器人进行操作控制</p>
                    </div>
                </div>
                <!-- 手动模式 -->
                <div class="moveMode" v-if="selectedTab === 2">
                    <div class="title">
                        <p>手动模式</p>
                        <img src="../../../images/line1.png" alt="">
                    </div>
                    <div style="width:100%;display: flex;justify-content: center;align-items: center;">
                        <div class="ptz">
                            <!-- 外圆环 -->
                            <div id="round"></div>
                            <!-- 黑色内圆环 -->
                            <div id="center_black"></div>
                            <!-- 内圈 -->
                            <div id="center_blue"></div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @mousedown="startCartQj"
                                        @mouseup="stopCartQj">
                                        <span>前</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @mousedown="startCartYZ"
                                        @mouseup="stopCartYZ">
                                        <span>右</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle8" @mousedown="startCartZZ"
                                        @mouseup="stopCartZZ">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @mousedown="startCartHT"
                                        @mouseup="stopCartHt">
                                        <span>后</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 一键返航 -->
                <div class="goBack" v-if="selectedTab === 3">
                    <div class="title">
                        <p>一键返航</p>
                        <img src="../../../images/line1.png" alt="">
                    </div>
                    <div class="imgBox">
                        <img src="../../../images/kaishi 拷贝.png" alt="">
                        <img src="../../../images/zhanting 拷贝.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 视频区域 -->
            <div class="videobox">
                <div class="videoCenter">
                    <div class="videoView">
                        <video v-if="videoBg" controls id="videoFlv" style="width:99.4%;height:99.4%"
                            class="video-js"></video>
                    </div>
                </div>
                <div class="revealBox">
                    <div class="jxb">
                        <div class="jxbheader">
                            <p>{{ robotTitle }}状态</p>
                            <span></span>
                        </div>
                        <div class="jxbBody">
                            <div class="jxbBox">
                                <p class="jxbBoxP">是否急停</p>
                                <div class="jxbBox-1">
                                    <p v-if="stopRobot === 1">是</p>
                                    <p v-if="stopRobot === 0">否</p>
                                    <p v-else>暂无数据</p>
                                </div>
                            </div>
                            <div class="jxbBox">
                                <p class="jxbBoxP">电量</p>
                                <div class="jxbBox-1">
                                    <p v-if="dcdl == null || dcdl == ''">暂无数据</p>
                                    <p v-else>{{ dcdl }}%</p>
                                </div>
                            </div>
                            <div class="jxbBox">
                                <p class="jxbBoxP">机械臂是否碰撞</p>
                                <div class="jxbBox-1">
                                    <p v-if="jxbpz === 1">是</p>
                                    <p v-if="jxbpz === 0">否</p>
                                    <p v-else>暂无数据</p>
                                </div>
                            </div>
                            <div class="jxbBox">
                                <p class="jxbBoxP">试剂瓶状态</p>
                                <div class="jxbBox-1">
                                    <p v-if="sjpzt === 1">液位正常</p>
                                    <p v-if="sjpzt === 0">需要补液</p>
                                    <p v-else>暂无数据</p>
                                </div>
                            </div>
                            <div class="jxbBox">
                                <p class="jxbBoxP">导航状态</p>
                                <div class="jxbBox-1" v-if="dhzt == 0">
                                    <p>等待新任务</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 1">
                                    <p>正在执行</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 2">
                                    <p>取消任务</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 3">
                                    <p>任务完成</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 4">
                                    <p>任务中断</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 5">
                                    <p>任务暂停</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 6">
                                    <p>定位丢失</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 7">
                                    <p>异常</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 8">
                                    <p>异常暂停</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 9">
                                    <p>正在充电</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 10">
                                    <p>返回充电桩</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 11">
                                    <p>正在出桩</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 12">
                                    <p>返回起点</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 13">
                                    <p>未出桩</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 14">
                                    <p>等待充电</p>
                                </div>
                                <div class="jxbBox-1" v-if="dhzt == 15">
                                    <p>暂无数据</p>
                                </div>
                            </div>
                            <!-- <div class="jxbBox">
                                <img src="../../../images/yunxin1.png" alt="">
                                <img src="../../../images/daiji.png" alt="">
                                <p style="cursor: pointer;margin-left:6.5px;">状态--</p>
                            </div> -->
                        </div>
                    </div>
                    <div class="ycl">
                        <div class="yclheader">
                            <p>{{ YclName }}控制面板</p>
                            <span></span>
                        </div>
                        <div class="yclBody">
                            <div class="yclBox">
                                <img src="../../../images/daiji.png" alt="" v-if="bjzt == 3">
                                <img src="../../../images/baojing.png" alt="" v-if="bjzt == 1">
                                <img src="../../../images/yunxin1.png" alt="" v-if="bjzt == 0">
                                <p style="cursor: pointer;margin-left:6.5px;">报警状态</p>
                            </div>
                            <div class="yclBox">
                                <img src="../../../images/daiji.png" alt="" v-if="yclzdlc == 3">
                                <img src="../../../images/baojing.png" alt="" v-if="yclzdlc == 100">
                                <img src="../../../images/yunxin1.png" alt="" v-if="yclzdlc == 0">
                                <p style="cursor: pointer;margin-left:6.5px;">预处理站自动流程</p>
                            </div>
                            <div class="yclBox">
                                <img src="../../../images/daiji.png" alt="" v-if="ltccsz == 3">
                                <img src="../../../images/baojing.png" alt="" v-if="ltccsz == 100">
                                <img src="../../../images/yunxin1.png" alt="" v-if="ltccsz == 0">
                                <p style="cursor: pointer;margin-left:6.5px;">流通池出水中</p>
                            </div>
                            <div class="yclBox">
                                <img src="../../../images/daiji.png" alt="" v-if="ltccswc == 3">
                                <img src="../../../images/yunxin1.png" alt="" v-if="ltccswc == 0">
                                <img src="../../../images/baojing.png" alt="" v-if="ltccswc == 100">
                                <p style="cursor: pointer;margin-left:6.5px;">流通池出水完成</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import flvjs from 'flv.js'
import FlvExtend from 'flv-extend';
import { GetFlvUrl, flvStop } from '@/api/cyRobot/home'
import { LinkRobot, getPreConter, GetCardata, Cartalong, Trolleyastern, CarturnLeft, starboard } from '@/api/cyRobot/controls'
export default {
    name: 'RightView',
    data() {
        return {
            webRtcServer: null,//摄像头服务
            //是否显示video框背景
            videoBg: false,
            //控制模式板块的切换(表示默认显示第一个内容)
            selectedTab: 0,
            robotTitle: localStorage.getItem('robotName') || '采样机器人',
            robotId: localStorage.getItem('robotId' || ''),
            flvPlayer: null,
            flvUrl: '',
            rtspUrl: localStorage.getItem('rtspUrl'),
            YclName: localStorage.getItem('YclName') || '预处理端',
            queryparmas: {
                conIP: localStorage.getItem('yclConIp' || ''),
                id: localStorage.getItem('yclId' || ''),
            },
            //预处理控制面板数据
            bjzt: '3',
            yclzdlc: '3',
            ltccsz: '3',
            ltccswc: '3',
            //机器人面板数据
            //定位状态
            locationState: '3',
            //地图名称
            usingMap: '',
            //导航进度
            taskState: '',
            //机器人当前速度
            linearX: '',
            //是否急停
            stopRobot: null,
            //电量
            dcdl: '',
            //机械臂是否碰撞
            jxbpz: null,
            //试剂瓶状态
            sjpzt: null,
            //导航状态
            dhzt: '15',
            //时间戳
            mousedownTime: 0,
            mouseupTime: 0,
            timer: null,
            isRunning: false,
            rtsp: '',
            robotCamIP: localStorage.getItem('robotCamIP')
        }
    },
    created() {
        //监听全局事件总线上的'updateRobotTitle'事件
        this.$bus.$on('updateRobotTitle', (newTitle) => {
            this.robotTitle = newTitle
        })
        //监听全局事件总线上的'updateRobotId'事件
        this.$bus.$on('updateRobotId', (newId) => {
            this.robotId = newId
            this.getOperation()
        })
        //监听全局事件总线上的'updateYclName'事件
        this.$bus.$on('updateYclName', (newyclName) => {
            this.YclName = newyclName
        })
        //监听全局事件总线上的updateYclData事件
        this.$bus.$on('updateYclData', (data) => {
            this.queryparmas.id = data.id
            this.queryparmas.conIP = data.conIp
            this.PreConterList()  //预处理端控制面板数据
        })
        //监听全局事件总线上的'updateRobotId'事件
        this.$bus.$on('updateRobotCamIP', (newCamIP) => {
            this.robotCamIP = newCamIP
            //切换机器人就播放
            this.spbf()
        })
    },
    computed: {
        //导航进度
        percentage() {
            return (this.taskState * 100).toFixed(2) + '%';
        }
    },
    mounted() {
        // this.getLinkRobot()
        this.stopFlvVideo() //停止flv流
        // this.getFlvUrl()
        this.timer = setInterval(() => {
            if (localStorage.getItem('robotId')) {
                this.getOperation()  //获取机器人运行数据
            }
            if (localStorage.getItem('yclId')) {
                this.PreConterList()  //预处理端控制面板数据
            }
        }, 2000)
        this.spbf()
    },
    methods: {
        //插件播放
       spbf() {
                   console.log('视频地址', localStorage.getItem("robotCamIP"));
                   if (localStorage.getItem("robotCamIP") != '' && localStorage.getItem("robotCamIP") != null) {
                       this.videoBg = true;
                       // 确保 videoFlv 元素已经存在
                       this.$nextTick(() => {
                           const videoElementH = document.getElementById('videoFlv');
                           if (videoElementH) {
                               this.webRtcServer = new WebRtcStreamer('videoFlv', location.protocol + '//127.0.0.1:8000');
                               this.webRtcServer.connect('rtsp://' + localStorage.getItem("robotCamIP") + ':554/video1');
                               this.rtsp = 'rtsp://' + localStorage.getItem("robotCamIP") + ':554/video1'
                                console.log('视频地址', this.rtsp);
                           } else {
                               console.error('videoFlv 元素不存在');
                           }
                       });

                   } else {
                       this.videoBg = false;
                   }
               },

        //获取flv视频流地址
        getFlvUrl() {
            if (localStorage.getItem('robotName')) {
                this.videoBg = true
                const rtspUrl = {
                    rtspUrl: 'rtsp://' + localStorage.getItem("robotCamIP") + ':554/user=admin&password=&channel=1&stream=0.sdp?'
                }
                console.log('控制页视频流地址', rtspUrl)
                GetFlvUrl(rtspUrl).then(response => {
                    this.flvUrl = response.data
                    this.createFlvPlayer(this.flvUrl)
                })
            }
        },
        //播放flv 的固定代码
        createFlvPlayer(flvUrl) {
            // 根据FLV URL创建播放器实例
            if (flvjs.isSupported()) {
                const videoElementH = document.getElementById('videoFlv')
                if (videoElementH) {
                    // 配置需要的功能
                    this.flvPlayer = new FlvExtend({
                        element: videoElementH, // *必传
                        frameTracking: true, // 开启追帧设置
                        updateOnStart: true, // 点击播放后更新视频
                        updateOnFocus: true, // 获得焦点后更新视频
                        reconnect: true, // 开启断流重连
                        reconnectInterval: 0 // 断流重连间隔
                    })
                    // 调用 init 方法初始化视频
                    // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
                    const player = this.flvPlayer.init(
                        {
                            type: 'flv',
                            url: flvUrl,
                            isLive: true
                        },
                        {
                            enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
                            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
                            stashInitialSize: 128, // 减少首帧显示等待时长
                            enableWorker: true // 启用分离的线程进行转换
                        }
                    )
                    // 直接调用play即可播放
                    player.play()
                }
            }
        },
        //停止flv视频流
        stopFlvVideo() {
            flvStop().then(response => { })
        },
        //机器人连接
        getLinkRobot() {
            LinkRobot(this.robotId).then(response => {
            })
        },
        //预处理端控制页展示内容
        PreConterList() {
            getPreConter(this.queryparmas).then(response => {
                this.bjzt = response.data.cybjStatus
                this.ltccsz = response.data.ltccsz
                this.ltccswc = response.data.ltccswc
                this.yclzdlc = response.data.yclzdlcyx
            })
        },
        //机器人运行信息
        getOperation() {
            const id = {
                id: this.robotId
            }
            GetCardata(id).then(response => {
                this.locationState = this.convertLocationState(response.data.locationState)
                this.usingMap = response.data.usingMap
                this.taskState = response.data.taskState
                this.linearX = response.data.linearX
                this.stopRobot = parseInt(response.data.emergency_stop)
                this.dcdl = response.data.soc
                this.jxbpz = parseInt(response.data.protective_stop)
                this.sjpzt = this.convertSjpzt(response.data.level_11)
                this.dhzt = response.data.systemState
            });
        },
        convertLocationState(state) {
            return state ? 0 : 1;
        },
        convertSjpzt(state) {
            return state ? 0 : 1;
        },
        //小车前进
        startCartQj() {
            console.log('小车前进1');
            this.isRunning = true;
            this.runCart();
        },
        runCart() {
            if (!this.isRunning) return;
            const id = {
                id: this.robotId
            };
            Cartalong(id).then(response => {
                console.log('小车前进2');
                if (this.isRunning) {
                    this.timer = setTimeout(() => this.runCart(), 100);
                }
            }).catch(error => {
                console.error('请求失败:', error);
            });
        },
        stopCartQj() {
            console.log('小车前进停止');
            this.isRunning = false;
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        },
        //小车后退
        startCartHT() {
            console.log('小车后退1');
            this.isRunning = true;
            this.runHtCart();
        },
        runHtCart() {
            if (!this.isRunning) return;
            const id = {
                id: this.robotId
            };
            Trolleyastern(id).then(response => {
                console.log('小车后退2');
                if (this.isRunning) {
                    this.timer = setTimeout(() => this.runHtCart(), 100);
                }
            }).catch(error => {
                console.error('请求失败:', error);
            });
        },
        stopCartHt() {
            console.log('小车后退停止');
            this.isRunning = false;
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        },
        //小车左转弯
        startCartZZ() {
            console.log('小车左转1');
            this.isRunning = true;
            this.runZZCart();
        },
        runZZCart() {
            if (!this.isRunning) return;
            const id = {
                id: this.robotId
            };
            CarturnLeft(id).then(response => {
                console.log('小车左转2');
                if (this.isRunning) {
                    this.timer = setTimeout(() => this.runZZCart(), 100);
                }
            }).catch(error => {
                console.error('请求失败:', error);
            });
        },
        stopCartZZ() {
            console.log('小车左转停止');
            this.isRunning = false;
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        },
        //小车右转弯
        startCartYZ() {
            console.log('小车右转1');
            this.isRunning = true;
            this.runYZCart();
        },
        runYZCart() {
            if (!this.isRunning) return;
            const id = {
                id: this.robotId
            };
            starboard(id).then(response => {
                console.log('小车右转2');
                if (this.isRunning) {
                    this.timer = setTimeout(() => this.runYZCart(), 100);
                }
            }).catch(error => {
                console.error('请求失败:', error);
            });
        },
        stopCartYZ() {
            console.log('小车右转停止');
            this.isRunning = false;
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        },
        //急停按钮提示框
        open() {
            this.$confirm('此操作将整体断电,需要人工恢复,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    beforeDestroy() {
        //销毁事件总线
        this.$bus.$off('updateRobotTitle')
        this.$bus.$off('updateRobotId')
        this.$bus.$off('updateYclName')
        this.$bus.$off('updateYclData')
        this.$bus.$off('updateRobotCamIP')

        // if (this.rtspUrl != null || this.rtspUrl != "") { this.rtspUrl = ""; }
        // if (this.flvPlayer != null) {
        //     this.flvPlayer.destroy();
        //     this.flvPlayer = null;
        // }
        // this.stopFlvVideo() //停止flv流
        if (this.timer) { clearInterval(this.timer); }
        if (this.webRtcServer != null) {
            this.webRtcServer.disconnect();
            this.webRtcServer = null
        }
    },
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.rightView {
    width: 70%;
    height: 100%;
    padding-right: 5px;

    // background-color: goldenrod;
    .header {
        width: 100%;
        height: 40px;
        border-radius: 0px 0px 2px 2px;
        border: 1px solid #1560AC;
        border-top: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 18px;
        color: #E9E9E9;
        margin-bottom: 5px;
    }

    .centerBox {
        width: 100%;
        height: calc(100vh - 49px - 40px);
        display: flex;
        justify-content: center;
        align-items: center;


        //模式模块
        .mode {
            width: 35%;
            height: 100%;
            padding-left: 4px;
            padding-right: 4px;
            border-radius: 2px;
            border: 1px solid #1560AC;

            .buttonArea {
                width: 100%;
                height: 35%;

                //background-color: rgb(221, 34, 121);
                .title {
                    width: 100%;
                    height: 20%;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 14px;
                    color: #EDEDED;
                    margin-top: 10px;

                    // background-color: coral;
                    >span {
                        display: block;
                        width: 37px;
                        height: 2px;
                        background: #1560AC;
                        border-radius: 1px;
                        margin-left: 10px;
                        margin-top: 4px;
                    }
                }

                .btnBody {
                    width: 100%;
                    height: 75%;
                    display: flex;
                    flex-flow: wrap;

                    //background-color: darkkhaki;
                    .modeBtn {
                        width: 50%;
                        height: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        :nth-child(1) {
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            font-size: 11px;
                            color: #EDEDED;
                            margin-right: 4.5px;
                        }

                        :nth-child(2) {
                            border-width: 0px;
                            height: 25px;
                            width: 25px;
                        }
                    }
                }
            }

            .displayArea {
                width: 100%;
                height: 15%;
                background: #F5F5F5;
                border-radius: 5px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 15px;
            }

            .modeArea {
                width: 100%;
                height: 42%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .title {
                    width: 100%;
                    height: 30px;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 12px;
                    color: #FFFFFF;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    // background-color: aquamarine;
                    >p {
                        margin-bottom: 4px;
                    }
                }

                .modeBtn {
                    width: 100%;
                    height: 85%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .modeBtn1 {
                        width: 70%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 10px;
                        color: #EDEDED;

                        :nth-child(1) {
                            width: 85px;
                            height: 22px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: linear-gradient(0deg, #123150, #1C97B1);
                            border-radius: 2px;
                            border: 1px solid #1560AC;
                        }

                        .modeBtn1-1 {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            p {
                                width: 67px;
                                height: 22px;
                                background: #123150;
                                border-radius: 5px;
                                border: 1px solid #1560AC;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-right: 2px;
                            }
                        }
                    }
                }
            }

            //手动模式
            .moveMode {
                width: 100%;
                height: 42%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .title {
                    width: 100%;
                    height: 30px;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 12px;
                    color: #FFFFFF;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    >p {
                        padding-left: 20px;
                        margin-bottom: 4px;
                    }

                    >img {
                        padding-left: 20px;
                    }
                }

                .ptz {
                    position: relative;
                    width: 300px;
                    height: 180px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }

                .circle-left {
                    width: 73px;
                    height: 146px;
                    border-radius: 0px 73px 73px 0px;
                    position: absolute;
                    right: 0;
                    transform-origin: 0 50%;
                }

                .circle-right {
                    width: 73px;
                    height: 146px;
                    /* border: 1px solid #fff; */
                    border-radius: 73px 0px 0px 73px;
                    position: absolute;
                    right: 0;
                    transform-origin: 100% 50%;
                }

                /* 八等份分割线 */
                #Canvas {
                    position: absolute;
                    z-index: 1;
                    pointer-events: none;
                    left: 87px;
                    top: 27px;
                    transform: rotate(-22.5deg);
                }

                /* 外圆环 */
                #round {
                    width: 160px;
                    height: 160px;
                    background-color: #123150;
                    border-radius: 50%;
                    position: absolute;
                    left: 80px;
                    top: 10px;
                    z-index: 0;
                }

                /* 黑色内圆环 */
                #center_black {
                    width: 74px;
                    height: 74px;
                    background-color: #123150;
                    border-radius: 50%;
                    position: absolute;
                    left: 123px;
                    top: 53px;
                    z-index: 1;
                }

                /* 中心蓝色圆环 */
                #center_blue {
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    background: linear-gradient(68deg, #00DADD, #24A1F1);
                    border-radius: 50%;
                    position: absolute;
                    left: 135px;
                    top: 66px;
                    z-index: 2;
                }

                #center_blue span {
                    position: absolute;
                    left: 17px;
                    top: 22px;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                /* 圆八等份 */
                #circle0 {
                    width: 146px;
                    height: 146px;
                    border-radius: 73px;
                    top: 0px;
                    background-color: #123150;
                    position: absolute;
                    left: 87px;
                    top: 17px;
                    z-index: 0;
                    pointer-events: auto;
                    transform: rotate(-44.5deg);
                }

                #left {
                    /* 用矩形切割半圆 */
                    clip: rect(0px 73px 146px 0px);
                    position: absolute;
                    right: 0px;
                    width: 73px;
                    height: 146px;
                    overflow: hidden;
                    border-left: 6px solid #123150;
                }

                #right {
                    clip: rect(0px 78px 146px 0px);
                    position: absolute;
                    left: 0px;
                    width: 76px;
                    height: 146px;
                    overflow: hidden;
                    border-right: 1px solid #123150;
                }

                #circle2:hover,
                #circle4:hover,
                #circle6:hover,
                #circle8:hover,
                #center_blue:hover {
                    cursor: pointer;
                }

                #circle2 {
                    background-color: #1f5386;
                    transform: rotate(0deg);
                    //border-left: 2px solid #1e1913;
                }

                #circle2 span {
                    position: absolute;
                    left: 32px;
                    top: 30px;
                    transform: rotate(44.5deg);
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #EDEDED;
                }


                #circle4 {
                    background-color: #1f5386;
                    transform: rotate(90deg);
                    border-left: 5px solid #123150;
                }

                #circle4 span {
                    position: absolute;
                    left: 30px;
                    top: 30px;
                    transform: rotate(-45.5deg);
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #EDEDED;
                }


                #circle6 {
                    background-color: #1f5386;
                    transform: rotate(270deg);
                    border-right: 5px solid #123150;
                }

                #circle6 span {
                    position: absolute;
                    right: 28px;
                    top: 25px;
                    transform: rotate(134.5deg);
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #EDEDED;
                }

                #circle8 {
                    background-color: #1f5386;
                    transform: rotate(360deg);
                    //border-right: 4px solid #1e1913;
                }

                #circle8 span {
                    position: absolute;
                    right: 30px;
                    top: 30px;
                    transform: rotate(45.5deg);
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #EDEDED;
                }



            }

            //一键返航
            .goBack {
                width: 100%;
                height: 42%;
                display: flex;
                flex-direction: column;
                align-items: center;
                //justify-content: center;

                .title {
                    width: 100%;
                    height: 30px;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 12px;
                    color: #FFFFFF;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    >p {
                        margin-bottom: 4px;
                    }
                }

                .imgBox {
                    width: 80%;
                    height: 85%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
            }
        }


        //视频区域
        .videobox {
            width: 65%;
            height: 100%;
            border-radius: 2px;
            border: 1px solid #1560AC;
            border-top: none;
            border-left: none;

            //background-color: chartreuse;
            .videoCenter {
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: url(../../../images/shiping.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                //background-color: aquamarine;
                .videoView {
                    width: 100%;
                    height: 100% !important;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-image: url(../../../images/jiankong.png);
                    background-repeat: no-repeat;
                    background-position: center center;
                }

                .video-js {
                    background-color: rgb(1 5 43);
                    object-fit: fill;
                    //隐藏video播放按钮
                }

                video {
                    pointer-events: none;
                }

                //隐藏video播放按钮
                video::-webkit-media-controls-play-button {
                    display: none !important;
                }

                //隐藏video音量进度条
                video::-webkit-media-controls-volume-slider {
                    display: none !important;
                }

                //隐藏video音量按钮
                video::-webkit-media-controls-mute-button {
                    display: none !important;
                }

                video::-webkit-media-controls-toggle-closed-captions-button {
                    display: none !important;
                }

                //隐藏当前时间
                video::-webkit-media-controls-current-time-display {
                    display: none !important;
                }

                //隐藏剩余时间
                video::-webkit-media-controls-time-remaining-display {
                    display: none !important;
                }

                //隐藏进度条
                video::-webkit-media-controls-timeline {
                    display: none !important;
                }

                //更多选项
                video::-internal-media-controls-overflow-button {
                    display: none !important;
                }
            }

            .revealBox {
                width: 100%;
                height: 50%;
                display: flex;

                .jxb {
                    width: 50%;
                    height: 100%;

                    .jxbheader {
                        width: 100%;
                        height: 10%;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 11px;
                        color: #EDEDED;
                        padding-left: 10px;
                        padding-top: 6px;

                        //background-color: cornflowerblue;
                        >span {
                            display: block;
                            width: 37px;
                            height: 2px;
                            background: #1560AC;
                            border-radius: 1px;
                            margin-left: 10px;
                            margin-top: 2px;
                        }
                    }

                    .jxbBody {
                        width: 100%;
                        height: 90%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;

                        //background-color: cadetblue;
                        .jxbBox {
                            width: 70%;
                            //height: 10%;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: 11px;
                            color: #EDEDED;
                            //background-color: darkgoldenrod;

                            .jxbBoxP {
                                width: 85px;
                                height: 22px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background: linear-gradient(0deg, #123150, #1C97B1);
                                border-radius: 2px;
                                border: 1px solid #1560AC;
                            }

                            .jxbBox-1 {
                                :nth-child(1) {
                                    width: 67px;
                                    height: 22px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background: #123150;
                                    border-radius: 5px;
                                    border: 1px solid #1560AC;
                                }
                            }
                        }
                    }

                }

                .ycl {
                    width: 50%;
                    height: 100%;
                    border-radius: 2px;
                    border-left: 1px solid #1560AC;

                    // background-color: rgb(24, 129, 94);
                    .yclheader {
                        width: 100%;
                        height: 10%;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        font-size: 11px;
                        color: #EDEDED;
                        padding-left: 18px;
                        padding-top: 6px;

                        //background-color: cornflowerblue;
                        >span {
                            display: block;
                            width: 37px;
                            height: 2px;
                            background: #1560AC;
                            border-radius: 1px;
                            margin-left: 10px;
                            margin-top: 2px;
                        }
                    }

                    .yclBody {
                        width: 100%;
                        height: 90%;
                        display: flex;
                        flex-wrap: wrap;

                        //background-color: cadetblue;
                        .yclBox {
                            width: 50%;
                            //height: 10%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: 11px;
                            color: #EDEDED;
                        }
                    }
                }
            }
        }

    }
}
</style>
